<template>
  <div class="songs" :style="{height}">
    <ul class="song-list">
      <li v-for="(song,index) in songs" :class="['song-item','soft','white',musicId === song.id ? 'active': '']" :id="song.id" :key="index">
        <div class="music-info" v-touch @click="gotoPlay(song.id)">
          <v-text class="music-name" width="100%" :mode="musicId === song.id ?'marquee':'ellipsis'" :text="song.name" />
          <p class="music-singer text-ellipsis">{{song.ar.map((item)=>item.name).join(" / ")}}</p>
        </div>
        <div class="controller">
          <slot name="actions" :id="song.id" :index="index" >
<!--            <van-button class="icon-btn" round-->
<!--                        color="transparent"-->
<!--            >-->
<!--              <van-icon class="icon" class-prefix="music" name="mv" />-->
<!--            </van-button>-->
          </slot>
        </div>
      </li>
    </ul>
  </div>
</template>

<style lang="scss" scoped>
.songs{
  width: 100%;
  overflow-y: scroll;
  .song-list{
    list-style-type: none;
    width: 95%;
    margin: 0 auto;
    .song-item{
      display: flex;
      align-items: center;
      width: 100%;
      margin: .5rem 0;
      padding: 0 .5rem;
      box-sizing: border-box;
      height: 4rem;

      &.active{
        color: #07c160;
      }

      .music-info{
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        flex-grow: 1;
        max-width: 76%;
        padding: 0 .5rem;
        height: 100%;
        box-sizing: border-box;
        .music-name{
          font-size: 14px;

        }
        .music-singer{
          font-size: 12px;
          width: 100%;
        }
      }
      .controller{
        display: flex;
        justify-content: flex-end;
        width: 20%;
        .icon-btn{
          width: 2rem;
          height: 2rem;
          .icon{
            font-size: 1.2rem;
            color: black;
          }

        }
      }
    }
  }
}
</style>

<script setup>

import {computed, provide, ref} from "vue";
import {useStore} from "vuex";
import MusicInfo from "../../views/popup/MusicInfo.vue";

let store = useStore();
let musicId = computed(()=> store.state.music.musicId);
let loading = ref(true);
let musicInfoId = ref(0);
let musicInfoShow = ref(false);
let propsDef = defineProps({
  songs: {
    type:Array
  },
  height:{
    type:String,
    default:"100%"
  }
});
// 提供显示功能给下级使用
provide("musicInfo",musicInfoShow)


// 跳转播放指定id的音乐
function gotoPlay(id){
  store.dispatch("music/playToId",id);
}
// 获取音乐详情
function showMusicInfo(id){
  musicInfoId.value = id;
  musicInfoShow.value = true;
}

</script>

<style scoped>

</style>